<!DOCTYPE html>
{% load i18n %}
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon" type="image/png" href="/static/favicon.ico"/>
    <link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
    <title>{% trans '注册'%}</title>
    {% include 'show/link.html' %}
    <script src="/static/lib/csrf.js"></script>
    <style>
        @media only screen and (max-width: 479px)
        {

            .this_main {
                padding: 0px!important;
                margin-top: 0px!important;
            }
            .container {
                padding: 0px!important;
            }
            .register-form-box {
                text-align: center;
                margin: 0 auto;
                width: 100%px!important;
            }
            .register-form-box .register-form {
                padding-bottom: 0px!important;
            }

            .register-form-box {
                text-align: center;
                margin: 0 auto;
                width: 100%!important;
            }
            .register-form-header{
                height: 0px!important;
            }
            .register-footer-blank{
                height: 0px!important;
            }

            .header_mobile {
                display:None
            }
            .footer_mobile {
                display:None
            }
            .register-form .form-group{
                margin: 20px 20px 0 40px!important;
                position: relative;
                background-color: #fff;
            }
        }
        .f-fl{float:left;}
        .f-fr{float:right;}
        .errorlist {
            color: red;
        }
        .form-bg{
            background: #00b4ef;
        }

        .register {background-image: URL("/static/images/login_ic_bg3.png");
            background-position: center;
            background-repeat:no-repeat;
            height:100%;
            width: 100%;
            background-size: cover;
        }


        .this_main{
            margin-top: 99px;
        }
        .register-form-header{
            background: url(/static/images/login_ic_bg_top.png) no-repeat;
            height: 20px;
        }
        .register-form-box {
            text-align: center;
            margin: 0 auto;
            width: 508px;
        }
        .register-form-box .register-form {
            background: url(/static/images/login_ic_bg_bg.png) repeat-y;
            padding-bottom: 34px;

        }
        .register-form-bottom{
            height: 30px;
            background: url(/static/images/login_ic_bg_bottom.png) no-repeat;
            margin-bottom: 260px;
        }
        .register-form .register-header-img {
            margin-top: 35px;
            width: 65px;
            height: 65px;
        }
        .register-form .heading {
            display: block;
            font-size: 16px;
            font-weight: 500;
            color: #00b4ef;
            padding: 10px 0 0 0;
        }
        .register-form .form-group {
            margin: 20px 104px 0 104px;
            position: relative;

        }
        .register-form .form-group:after{
            display: none;
        }
        .register-form .form-control {
            background-color: #fff;
            background-image: url(/static/images/login_ic_line.png);
            background-repeat: no-repeat;
            background-size: auto 42px;
            background-position: 40px -1px;
            border: none;
            box-shadow: none;
            padding: 0 0 0 58px;
            height: 40px;
            border: 1px solid #e5e5e5;
            border-radius: 2px;
        }
        .register-form .form-control:focus{
            border:1px solid #00b4ef;
            box-shadow: 0 0 1px #00b;
        }
        .register-form .form-group i {
            position: absolute;
            top: 11px;
            left: 11px;
            font-size: 17px;
            color: #c8c8c8;
            transition: all 0.5s ease 0s;
        }
        .register-form .form-group .get-code{
            position: absolute;
            top: 10px;
            right: 12px;
            color: #00b4ef;
            transition: all 0.5s ease 0s;
            cursor: pointer;
            padding: 0px;
            border: 0px;
            background: none;
        }
        .form-group .form-code{
            padding-right: 85px;
        }
        .errorlist,.errorlist li{
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .errorlist{
            padding-top:0px;
            text-align: left;
        }
        .errorlist li{
            font-size: 12px;
            line-height: 22px;
            color: #ee2c89;
        }
        .register-form .btn {
            font-size: 16px;
            color: #fff;
            background: #00b4ef;
            border-radius: 2px;
            padding: 9px 25px;
            border: none;
            text-transform: capitalize;
            transition: all 0.5s ease 0s;
        }
        .text-small a{
            color: #00b4ef;
        }
        .register-form div.form-btn {
            margin-top: 0px;
        }
        .register-msg-box {
            min-height: 40px;
        }
        .form-group .form-password{
            border: 1px solid #ee2c89;
        }

        .f-email:before {
            content: url(/static/images/login_ic_email.png);
            width: 16px;
        }
        .f-phone:before {
            content: url(/static/images/login_ic_iphone.png);
            width: 16px;
            padding-left: 3px;
        }
        .f-qrcode:before {
            content: url(/static/images/login_ic_yanz.png);
            width: 16px;
            padding-left: 3px;
        }
        .f-lock:before {
             content: url(/static/images/login_ic_lock.png);
             width: 16px;
             padding-left: 3px;
         }
        .f-male:before {
            content: url(/static/images/login_ic_recom.png);
            width: 16px;
            padding-left: 3px;
        }
        #code_msg{
            text-align: left;
            font-size: 12px;
            color: #ee2c89;
            padding: 0px 0 0 0;
            display: block;
            line-height: 22px;
        }

    </style>

    <script>
        var set_countdown=60;
        var countdown=set_countdown;

        function settime(obj) { //发送验证码倒计时
            if (countdown == 0) {
                obj.attr('disabled',false);
                obj.removeAttr("disabled");
                obj.val("{% trans '没有收到?重新发送'%}");
                countdown = set_countdown;
                return;
                } else {
                obj.attr('disabled',true);
                obj.val("{% trans '重新发送'%}(" + countdown + ")");
                countdown--;
            }
            setTimeout(function() {
                settime(obj) }
            ,1000)
        }

        function sendmsm(){
            var phone = $("#id_phone").val()
            phone = String(phone)
            if (phone.length < 11){
                $("#code_msg").html('{% trans '手机号码不正确'%}')
                return
            }

            //console.log("phone  "  + phone)
            $.post("{%url 'verification_code'%}",
            {phone: phone},
            function(data){
                console.log("return  "  + data)
                if (data == true)
                {
                    $("#code_msg").html('{% trans '验证码发送成功,请查收'%}')
                }
                else
                {
                    $("#code_msg").html('{% trans '验证码发送失败,请稍后再试'%}')
                }
                var obj = $("#verification_code");
                settime(obj);
            })
        }
        $(document).ready(function() {
            //msg_tips("<b>{% trans '系统告示,为了防止虚假手机号注册领取奖励，提现或者交易前将对系统判定为虚假手机号码进行不限于语音核实和实名认证等手段核实，核实后无误后才能交易和提现,并对虚假手机号注册的账号以及关联账号进行查封处理' %}</b>", 20000);

            $("#verification_code").click(function()
            {

                sendmsm();

            })
        })

        function upperCase() {
            var x=document.getElementById("fname").value
            document.getElementById("fname").value=x.toUpperCase()
        }
        function checkButton(){

            var v1 = $("#lc-captcha-response").val()
            if (!v1 || v1.length < 2)
            {
                msg_tips("{% trans '请点击人机识别认证' %}", 2000);
                return false
            }
            else
            {
                document.getElementById("register").submit()
            }
        }

    </script>
</head>

<body>
<div class="header_mobile">
{% include '../show/top_bar.html' %}
</div>
<div class="row register">

    <div class="container this_main" class="col-md-12 col-xs-12">
        <div class="register-form-box">
            <div class="register-form-header"></div>
            <form id="register" class="form register-form" action="{% url 'users:register' %}" method="post" >
                <a  href="{% url 'index' %}">
                <img  class="register-header-img" src="/static/images/login_ic_head.png">
                <span class="heading">NBEX.COM{% trans '注册'%}</span>
                </a>
                {% csrf_token %}
                {% for field in form %}
                {% if field.name != 'password1' and field.name != 'password2' and field.name != 'nickname' and field.name != 'username' and field.name != 'referrer' %}
                <div class="form-group">
                    {{ field }}
                    {% if field.name == "email" %}
                    <i class="f-email"></i>
                    {% elif field.name == "phone" %}
                    <i class="f-phone"></i>
                    {% elif field.name == "referrer" %}
                    <i class="fa fa-male"></i>
                    {% endif %}

                    <p class="help text-small text-muted f-fl red"> {{ field.errors }} </p>
                    {% if field.help_text %}
                    <p class="help text-small text-muted f-fl">{{ field.help_text|safe }}</p>
                    {% endif %}
                </div>
                {% endif %}
                {% endfor %}
                <div class="form-group">
                    <input type="input" name="code" class="form-control form-code" placeholder="{% trans '语音验证码'%}"/>
                    <i class="f-qrcode"></i>
                   <!-- <a class="get-code" id="verification_code">获取语音验证码</a>-->
                    <input type="button" id="verification_code" class="get-code" value="{% trans '获取语音验证码'%}">
                    <div class="text-small red " id="code_msg"></div>
                </div>
                <!--
                <div class="form-group help  ">
                    <input type="input" name="code" class="col-sm-5 col-xs-5 form-control2" placeholder="{% trans '请输入验证码'%}"/>
                    <i class="fa fa-qrcode"></i>
                    <input type="button" id="verification_code" class="col-sm-5 col-xs-6 btn btn-success" value="{% trans '免费获取验证码'%}">
                    <p class="help text-small text-muted f-fl red col-xs-12" id="code_msg"></p>
                    <div style="clear: both";></div>
                </div>
                -->
                <div class="form-group help">
                    <input type="password" class="form-control " name="password1" required id="id_password1" placeholder="{% trans '密码(至少8个字符,不能全为数字)'%}"/>
                    <i class="f-lock"></i>
                </div>
                <div class="form-group help">
                    <input type="password" class="form-control " name="password2" required id="id_password2" placeholder="{% trans '密码确认'%}"/>
                    <i class="f-lock"></i>
                    <!--<p class="f-fl help text-small text-muted f-fl ">{% trans '你的密码必须包含至少8个字符,且不能全部为数字'%}</p>-->
                    <div style="clear: both";></div>
                </div>
                <div class="form-group">
                    <input type="text" name="referrer" placeholder="{% trans '推荐码(可选)'%}" class="form-control" maxlength="20" id="id_referrer" value="{{referrer}}" />
                    <i class="f-male"></i>
                   <p class="help text-small text-muted f-fl ">{% trans '推荐码(可选)' %}</p>
                    <div style="clear: both";></div>
                    <div class="l-captcha" data-site-key="0bd7d3de2398ddb6fc3283de812dd2e8"></div>
                </div>
                <div class="form-group form-btn">
                    <div class="register-msg-box">
                {% for field in form %}
                {% if field.errors %}
                {% if field.name == 'password2'  %}
                    <script>
                        $("#id_password1").addClass("form-password")
                        $("#id_password2").addClass("form-password");
                    </script>
                    <p class="help text-small text-muted f-fl red"> {{ field.errors }} </p>
                {% else %}
                    {% if field.name == 'username'  %}
                    <p class="help text-small text-muted f-fl red"> {% trans '该邮件已经注册或者非法' %} </p>
                    {% else %}
                    <p class="help text-small text-muted f-fl red"> {{ field.errors }} </p>
                    {% endif %}
                {% endif %}
                {% endif %}
                {% endfor %}
                    </div>
                    <button type="button" class="control btn btn-primary btn-block" onclick="checkButton()"  >{% trans '注册'%}</button>
                </div>
                <div class="form-group text-small">

                    <input type="hidden" name="next" value=""/>
                    <a href="{% url 'users:login' %}">{% trans '立即登录'%}</a>
                </div>
            </form>
            <div class="register-form-bottom"></div>
        </div>
    </div>

</div>

<div class="footer_mobile" >
{% include '../show/footer.html' %}
</div>
<script>
    $(".new-top-fix").addClass("header-bg-img").removeClass("nav-default");
    $(".new-top-fix").addClass("header-positsion");
    $('.lang').hover(
        function(){$('.lanague').addClass('selected');},
        function () {$('.lanague').removeClass('selected');}
    );
</script>
<script src="//captcha.luosimao.com/static/js/api.js"></script>
</body>
</html>
